<template>
<div>
    <a-table bordered :data-source="dataSource" :columns="columns">
        <template #status="{ text: status }">
          <span>
              <a-tag :color="OrderNumToTextMap[status].color">
                  {{OrderNumToTextMap[status].text}}
              </a-tag>
          </span>
        </template>
        <template #product_list="{ text: product_list }">
          <span v-for="(item, index) in product_list" :key="item">
            {{item}}
            <span v-if="product_list[index+1]!=null"> </span>
          </span>
        </template>
        <template #bodyCell="{column, text, record }">
            <template v-if="['id', 'title','time','pay','address'].includes(column.dataIndex)">
                {{ text }}
            </template>
            <template v-else-if="['operation'].includes(column.dataIndex)">
                <a @click="onEdit(record)">修改</a>
            </template>
        </template>
    </a-table>

    <a-modal v-model:visible="visible" title="修改商品"
        @ok="handleOk" @cancel="handleCancel" okText="确定" cancelText="取消">

        <a-form :model="formState" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }" autocomplete="off">
            <a-form-item label="订单号" name="id">
                <a-input v-model:value="formState.id" :disabled="formState.id"/>
            </a-form-item>
            <a-form-item label="客户名">
                <a-input v-model:value="formState.name" />
            </a-form-item>
            <a-form-item label="产品列表" name="product_list">
                <a-input v-model:value="formState.product_list" />
            </a-form-item>
            <a-form-item label="价格" name="pay">
                <a-input v-model:value="formState.pay" />
            </a-form-item>
            <a-form-item label="地址" name="address">
                <a-input v-model:value="formState.address" />
            </a-form-item>
            <a-form-item label="生成时间" name="time">
                <a-input v-model:value="formState.time" :disabled="formState.time"/>
            </a-form-item>
            <a-form-item label="状态" name="status">
                <a-select v-model:value="formState.status">
                    <a-select-option :value="1">进行中</a-select-option>
                    <a-select-option :value="2">已完成</a-select-option>
                    <a-select-option :value="3">退货中</a-select-option>
                    <a-select-option :value="4">退货完成</a-select-option>
                </a-select>
            </a-form-item>
        </a-form>
    </a-modal>
</div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';
import {getOrderList, updateOrder } from '../../service/api/order';
import { message } from 'ant-design-vue';
import { OrderNumToTextMap } from './const';

// 表头
const columns = [{
    title: '订单号',
    dataIndex: 'id',
}, {
    title: '客户名',
    dataIndex: 'name',
}, {
    title: '产品列表',
    dataIndex: 'product_list',
    slots: {
      customRender: 'product_list'
    }
}, {
    title: '价格',
    dataIndex: 'pay',
}, {
    title: '地址',
    dataIndex: 'address',
}, {
    title: '订单生成时间',
    dataIndex: 'time',
}, {
    title: '状态',
    dataIndex: 'status',
    slots: {
      customRender: 'status'
    }
}, {
    title: '操作',
    dataIndex: 'operation',
}];

// 数据源
let dataSource = ref();

const useHttpRequestEffect = () => {
    const getOrderDataRequest = async () => {
        const res = await getOrderList();
        dataSource.value = res?.data
    }
    const updateOrderRequest = async (data) => {
        const res = await updateOrder(data);
        if (res?.data?.res) {
            message.success("修改成功")
        } else {
            message.error("修改失败")
        }
    }
    return {getOrderDataRequest, updateOrderRequest }
}

const useModalEffect = () => {
  const visible = ref(false);
  const formState = ref({});

  const { updateOrderRequest } = useHttpRequestEffect();
  const onEdit = item => {
    formState.value = item;
    visible.value = true;
  };
  const handleOk = () => {
    updateOrderRequest(formState.value);
    visible.value = false;
    formState.value = [];
  };
  const handleCancel = () => {
    visible.value = false;
    formState.value = [];
  }
  return {
      visible, formState, onEdit, handleOk, handleCancel
  }
}

export default defineComponent({
  setup() {
    const {  getOrderDataRequest } = useHttpRequestEffect();
    const {visible, formState,onEdit, handleOk, handleCancel } = useModalEffect();

    onMounted(async () => {
      await getOrderDataRequest();
    });

    return {
      columns,
      dataSource,
      getOrderDataRequest,
      visible,
      formState,
      onEdit,
      handleOk,
      handleCancel,
      OrderNumToTextMap
    };
  },
});
</script>

<style scoped>
.editable-add-btn{
    background-color: rgb(24, 144, 255);
    color:#fff;
    float:right;
    margin-right:20px;
}
.editable-add-btn:hover{
    background-color: rgb(24, 132, 234);
}
.editable-add-btn:active{
    background-color: rgb(117, 178, 236);
}
.editable-row-operations a {
  margin-right: 8px;
}
.addbtn{
    margin-right:50px;
}
</style>